<template>
  <div class="MapInfo">
    <InView class-name="title" animate-class-name="fadeInUp" />
    <InView class-name="box" animate-class-name="fadeInUp" @in-view="showMap = true">
      <template v-if="showMap">
        <div class="path animated fadeIn" />
        <div class="p1 animated fadeIn delay-1x" />
        <div class="p2 animated fadeIn delay-2x" />
        <div class="p3 animated fadeIn delay-3x" />
        <div class="p4 animated fadeIn delay-4x" />
        <div class="p-main animated fadeIn delay-5x">
          <img src="@/assets/images/6.gif" />
        </div>
      </template>
    </InView>
  </div>
</template>
<script lang="ts" setup>
import InView from '@/components/InView.vue'
import { ref } from 'vue'
const showMap = ref(false)
</script>
<style lang="scss" scoped>
.MapInfo {
  padding-top: 30px;

  .title {
    height: 101px;
    background: url('@/assets/images/detail-map-title.png') no-repeat center center;
    background-size: contain;
  }

  .box {
    height: 466px;
    width: 691px;
    margin: 79px auto 0;
    background: url('@/assets/images/map-bg.png') no-repeat center center;
    background-size: contain;
    position: relative;
  }

  .path {
    width: 689px;
    height: 463px;
    background: url('@/assets/images/map-net.png') no-repeat center center;
    background-size: contain;
    position: relative;
    z-index: 3;
  }

  .p1,
  .p2,
  .p3,
  .p4,
  .p-main {
    position: absolute;
    z-index: 2;
    opacity: 0;
  }

  .p1 {
    width: 142px;
    height: 190px;
    background: url('@/assets/images/map-p1.png') no-repeat center center;
    background-size: contain;
    right: 12px;
    top: 53px;
  }

  .p2 {
    width: 230px;
    height: 122px;
    background: url('@/assets/images/map-p2.png') no-repeat center center;
    background-size: contain;
    top: 59px;
    left: 0;
  }

  .p3,
  .p4 {
    width: 179px;
    height: 118px;
    background: url('@/assets/images/map-p3.png') no-repeat center center;
    background-size: contain;
    left: 0;
    top: 182px;
  }

  .p4 {
    background-image: url('@/assets/images/map-p3.png');
    top: 300px;
  }

  .p-main {
    height: 253px;
    width: 249px;
    background: url('@/assets/images/map-target.png') no-repeat center center;
    background-size: contain;
    top: 54px;
    left: 259px;
    img {
      width: 170px;
      position: absolute;
      top: 100px;
      left: 40px;
    }
  }
}
</style>
